<template>
    <div>
        <v-app-bar app elevation="0" dense color="primary">
            <v-btn icon @click="$router.go(-1)" color="white">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
            <v-toolbar-title class="text-center flex-grow-1 subtitle-1 white--text">{{appTitle}}</v-toolbar-title>

            <v-btn plain text  color="white" :ripple="false" :to="`/user/log/withdraw`">
                历史
            </v-btn>
        </v-app-bar>

        <v-container style="background-color: #BA2B39;" class="white--text pa-4 pb-8">
            <v-row class="px-4  mt-0" dense>
                <v-col cols="12" >
                    <span class="subtitle-1">可提现金额</span>
                </v-col>
                <v-col cols="12">
                    <span class="text-h5 font-weight-medium">{{total}}</span>
                    <span class="text-caption">元</span>
                </v-col>
            </v-row>
         </v-container>

        <v-container class="mt-n8">
            <v-card elevation="0" class="rounded-lg">
                <v-row class="pa-4  mt-0" dense>
                    <v-col cols="12" >
                        <v-text-field 
                            label="提现金额" 
                            type="number" 
                            prefix="¥" 
                            persistent-hint 
                            hint="最小提现金额为¥100"
                            v-model="money"
                        >
                        </v-text-field>
                    </v-col>
                </v-row>
            </v-card>

            <v-btn block rounded large 
                depressed 
                color="primary" 
                class="mt-16" 
                :loading="saving"
                @click="withdraw"
            >申请提现</v-btn>
         </v-container>

         <v-container v-if="items.length > 0">
            <v-card elevation="0" class="mb-2 pa-4 text--primary" v-for="item of items" :key="item.id">
                <v-row dense align="center"  no-gutters>
                    <v-col cols="12" >
                        <div class="d-flex align-center">
                            <span >{{item.created_at}}</span> 
                            <v-spacer></v-spacer>
                            <v-chip class="white--text float-right" label small :color="item.status == 1 ? 'green' : item.status == -1 ? 'red' : 'secondary'">{{item.status_name}}</v-chip>
                        </div>
                        <div class="body-1">
                            <span class="font-weight-medium mr-1">¥{{item.money}}</span> 
                        </div>
                    </v-col>
                </v-row>
            </v-card>
        </v-container>
    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from 'vuex';

export default {
    data: () => ({
        loading: false,
        saving: false,
        total: 0,
        money: null,
        items: []
    }),
    computed: {
        appTitle() {
            return "提现";
        },
        ...mapGetters([
            'uid'
        ]),
    },
    created() {
        this.load();
        this.loadProcess();
    },
    methods: {
        load() {
            const that = this;
            that.loading = true;
            axios.get(`/v1/user/money`).then((response) => {
                if (response.data.code == 0) {
                    that.total = response.data.data.free_money;
                } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                }
            })
            .catch(function () {})
            .then(function () {
                 that.loading = false;
            });
        },

        withdraw() {
            const that = this;
            that.saving = true;
            axios.post(`/v1/user/withdraw`, {money: that.money}).then((response) => {
                if (response.data.code == 0) {
                    that.total = response.data.data;
                    that.money = null;
                    that.loadProcess();
                    that.$toasted.show(response.data.msg, {position: "bottom-center"});
                } else {
                    that.$toasted.show(response.data.msg, {type: "error", position: "bottom-center"});
                }
            })
            .catch(function () {})
            .then(function () {
                 that.saving = false;
            });
        },

        loadProcess() {
            const that = this;
            axios.get(`/v1/user/withdraw/processing`).then((response) => {
                if (response.data.code == 0) {
                    that.items = response.data.data.items;
                } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                }
            })
            .catch(function () {})
            .then(function () {
            });
        },
    }
};
</script>